<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>comp</title>
    <link rel="stylesheet" common href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script>
        layui.config({
            base: "/model/", // 加载模块路径 
        })
    </script>
</head>

<body>
    <center>hello world for comp exp</center>
    <!-- 组件 -->
    <my-banner name="asd"></my-banner>
    <!-- 组件 -->
    <is-banner name="12"></is-banner>

    <div class="add">

    </div>
    <button id="add">添加</button>
    <script>
        layui.use(["comp","jquery"], function () {
            let comp = layui.comp
            let $ = layui.$
            
            $("#add").on("click",function(){
                   const div = document.createElement("is-banner") 
                   $(".add").append(div)
            })

            // 渲染组件
            comp.render({ tag: "my-banner", href: "/component/banner.html" })

            comp.render({ tag: "is-banner", href: "/component/banner.html" })
        })


    </script>
</body>

</html>